<template>
    <div class="cmt-container">
 <h3>发表评论</h3>
 <hr>
 <textarea placeholder="请输入要BB的内容(最多吐槽120字)"
 maxlength="120" v-model="msg"></textarea>
<mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

  <div class="cmt-list">
      <div class="cmt-item" v-for="(item,i) in comments" :key="item.add_time">
          <div class="cmt-title">
              第{{i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time|dateformat}} 15:37
          </div>
          <div class="cmt-body">
             {{item.content==='undefined'?'此用户很懒,妈都没说':item.content}}
          </div>
      </div>
  </div>
  <div class="cmt-list">
      <div class="cmt-item">
          <div class="cmt-title">
              第一楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-4-4 15:37
          </div>
          <div class="cmt-body">
              河职软件171 郑凯
          </div>
      </div> 
  </div>
   <div class="cmt-list">
      <div class="cmt-item">
          <div class="cmt-title">
              第一楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-4-4 15:37
          </div>
          <div class="cmt-body">
              河职软件171 郑凯
          </div>
      </div>
  </div>
   <div class="cmt-list">
      <div class="cmt-item">
          <div class="cmt-title">
              第一楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-4-4 15:37
          </div>
          <div class="cmt-body">
              河职软件171 郑凯
          </div>
      </div>
  </div>
   
   <div class="cmt-list">
      <div class="cmt-item">
          <div class="cmt-title">
              第一楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-4-4 15:37
          </div>
          <div class="cmt-body">
              河职软件171 郑凯
          </div>
      </div>
  </div>
  <mt-button type="danger" size="large" @click="getMore" plain>加载更多</mt-button>
   </div>
</template>
<script>
import {Toast} from 'mint-ui';
export default {
    data(){
        return{
         pageIndex:1,//默认展示第一页数据
         comments:[],
         msg:''
        }
    },
    created(){
        this.getComments();
    },
    methods:{
    getComments(){{//获取数据
    this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageIndex)
    .then(result=>{
        if(result.body.status===0){
            // this.comments=result.body.message;
            this.comments=this.comments.concat(result.body.message);
        }else{
            Toast("获取评论失败")
        }
    })
    }},
    getMore(){//加载数据
       this.pageIndex++,
       this.getComments()
    },
    postComment(){
        // 校验是否为空内容
        if(this.msg.trim().length===0){
            return Toast("评论内容不能为空")
        }
        // 发表评论
        // 参数1:请求的URL地址
        // 参数2:提交给服务器的数据对象
        // 参数3:定义提交时候,表单中数据的格式
    this.$http.post("api/postcomment/"+this.$route.params.id,{
        content:this.msg.trim()
    })
    .then(function(result){
      if(result.body.status===0){
          //拼接处一个评论对象
          var cmt={
              user_name:"匿名用户",
              add_time:Date.now(),
              content:this.msg.trim()
          };
          this.comments.unshift(cmt);
          this.msg="";
      }
    })
    },
    },
    
    props:["id"]
}
</script>
<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    hr{
        margin-top: 10px; 
        margin-bottom: 10px; 
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        margin-top: 5px;
      .cmt-item{
             font-size: 13px;
          .cmt-title{
           line-height: 30px;
           background-color: #ccc;
          }
          .cmt-body{
           line-height: 35px;
           text-indent: 2em;
          }
      }  
    }
}
</style>
